<template>
	<view class="root">
		<view class="talkInput">
			<!-- ref是起的别名,@iconClick点击图标触发;@confirm点击完成按钮【敲回车】时触发 -->
			<uni-easyinput ref="uipt" @confirm="goComment" suffixIcon="paperplane" v-model="replyContent"
				:placeholder="placeholder" @iconClick="goComment">
			</uni-easyinput>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>
<script>
	export default {
		name: "talkInput",
		props: { //通过props接收父组件中传过来的值
			commentObj: {
				type: Object,
				default: () => {
					return {}
				}
			},
			placeholder: {
				type: String,
				default: "请文明评论~"
			}
		},
		data() {
			return {
				replyContent: "",
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			goComment() { //提交评论
				// console.log(this.replyContent);
				if (this.replyContent == "") {
					this.fillMsg("error", "评论不能为空！");
					return;
				}
				uni.request({
					url: this.$e.Url + "/user/submitComment",
					data: {
						...this.commentObj,
						content: this.replyContent
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "POST",
					success: (res) => {
						console.log("请求API接口【/user/submitComment】", res);
						this.fillMsg("success", "评论成功");
						this.$emit("commentEnv", {//子组件向父组件传值
							id: res.data.id,
							uid: res.data.uid,
							content: res.data.content,
							province: res.data.province,
							time: res.data.time,
						}); //子组件向父组件传值
						this.replyContent = "";
						this.changePostComment(this.commentObj.postid, 1);
					}
				})
			},
			changePostComment(id, number) {//针对帖子的评论数量
				uni.request({
					url: this.$e.Url + "/user/changePostComment",
					data: { //传的是对象
						postid: id,
						num: number
					},
					method: 'PUT',
					header: {
						"Content-Type": "application/json"
					},
					success: (res) => {
						console.log("请求API接口【/user/changePostComment】", res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.root {
		.talkInput {
			width: 100%;
			background: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box; //padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里【怪异盒子模型】
			position: fixed; //固定位置
			bottom: 0;
			left: 0;
			z-index: 100;
		}
	}
</style>
